Day7 金魚 會員登入

簡單小語

會員登入畫面的練習，增加了觸摸效果及使用者體驗，先前看Amos老師教學時以為不難，實作才發現很多觀念不足，例如如何放圖片到整個body且圖片不會失真，細節才是能力的展現，表單部分也加深了label與input之間的關係，透過刻意練習，真的是讓自己再次思考，如何從無到有的編寫及完成，雖說簡單的畫面，卻也是練習很好的項目，往後真的要加入JavaScript的功能，可以驗證帳號密碼竟且註冊登入透過AJAX串接取的資料，難題重重，一一突破。

＊200908加入AJAX表單驗證囉!!!

筆記分享

1. 使用backdrop-filter: blur(5px)，可以讓背景呈現模糊，不會讓透明狀態下看穿後方背景圖。
2. flex應用處理，水平及垂直置中觀念亦為十分重要，justify-content，align-items。
3. 利用flex排列方式將font awesome放入input中。
4. label的for是為了focus在input中，因此for的值 = input id值(點擊label後focus在input)。
5. before及after真的很實用也很方便，在一些特殊設計及應用上，目前都優先使用。
6. 只要是a連結所產生的樣式建議都增加hover提升使用者體驗。
7. media分三類裝置，應用在不同尺寸上所呈現的表單寬度也不相同。
8. padding及margin使用方式，釐清推擠或內縮的pixel數目，方可正確了解移動及方向。
9. 登入表單記得放置“忘記密碼”選項，目前登入表單基本需擁有的樣式。
10. body也可以套用css樣式，此練習即有使用background及flex。

刻意練習

Practice(200722 Day 7)

首次練習

Practice(200531_會員登入)

2020 iT邦幫忙鐵人賽 Day7 網頁前端-刻意練習(會員登入)